<?php
$this->title = '仿谷歌控制台-bootstrap后台模板-模板库';
$this->registerMetaTag([
    'name' => 'keywords',
    'content' => '仿谷歌控制台,后台模板,bootstrap,响应式框架,admin,yii,yii2,模板,实用模板,下载'
]);
$this->registerMetaTag([
    'name' => 'description',
    'content' => 'Bootstrap极简风仿谷歌控制台，去掉花哨的样式，只提供必要的框架，兼具美观和简洁。'
]);
$this->registerMetaTag([
    'name' => 'author',
    'content' => 'chenzhiwei'
]);

?>

<div class="template">
    <div class="template-overview">
        <h1>仿谷歌控制台-后台模板</h1>
        <p>极简风仿谷歌控制台后台应用，去掉花哨的样式，只提供必要的框架，兼具美观和简洁。</p>
        <img src="/images/google-console-yii.png">
    </div>

    <div class="go-page">
        <a class="btn btn-warning" href="/template/google-console/demo">在线演示</a>
    </div>

    <div class="container cms-article">
        <?php
        use yii\bootstrap\Tabs;
        use frontend\modules\yii2\widgets\layouts\markdown\Markdown;

        $html = [
            "source" => <<<HTML
我已把模板上传到了`Gitee`，大家可以通过如下地址下载：

```shell
git clone -b v1.0 https://gitee.com/lv_frame/googel-console.git
```

您也可以通过下载离线包使用：[离线包](https://gitee.com/lv_frame/googel-console/repository/archive/v1.2)

> 注意：上述下载的模板是独立模板，您可以在浏览器上直接运行`index.html`文件来查看效果。

## 目录结构
```shell
├── assets
│   ├── bootstrap
│   └── jquery
├── images
│   └── logo.png
├── css
│   └── google.css
├── js
│   └── google.js
└── index.html
```
HTML,
            "yii" => <<<HTML

> 注意：此版本中并未添加`Login`登录页面。

我已将此模板融合到`Yii`并推送到了`composer.org`仓库中，因此您可以在`Yii`项目中执行如下命令来使用：

```php
composer require lvzmen/yii-google-console:v2.1
```

您可以通过如下命令下载源码：

```shell
git clone https://gitee.com/lv_frame/yii-google-console.git
```

使用方法是直接在控制器中指定`layout`：
```php
class SiteController extends Controller
{
    public \$layout = "@vendor/lvzmen/yii-google-console/layout/main";    
}
```

如果要修改菜单、logo、应用名称等内容，可以在任何一个`config`下的有效`params.php`加入如下代码：
```php
return [
    'google-console' => [
        // 头部导航，包括logo，应用名称，菜单和用户菜单
        "head" => [
            //"username" => "Lvzmen",
            "app_name" => [
                "label" => "Google Console",
                "url" => "#",
            ],
            "logo" => [
                "img" => "",
                "url" => "",
            ],
            "nav" => [
                [
                    "label" => "Overview",
                    "url" => "#",
                    "class" => "active"
                ],
                [
                    "label" => "Develop",
                    "url" => "#",
                    "class" => ""
                ],
                [
                    "label" => "Test",
                    "url" => "#",
                    "class" => ""
                ],
            ],
            "dropdown" => [
                ["label" => "Action", "url" => "#"],
                ["label" => "Another action", "url" => "#"],
                ["label" => "Something else here", "url" => "#"],
                "separator",
                ["label" => "Logout", "url" => "#"],
            ]
        ],
        // 左边导航栏
        "left" => [
            [
                "label" => "Project Details",
                "icon" => "search",
                "href" => "#",
                "class" => "active"
            ],
            [
                "label" => "Directory information",
                "icon" => "flash",
                "href" => "#",
                "class" => ""
            ]
        ]
    ]
];
```

HTML,
            "yii-login" => <<<HTML
> 注意：此版本融合了`Yii`的登录系统，复用了`Yii`的原生登录模式。

## 安装
```php
composer require lvzmen/yii-google-console:^3.0
```

## 使用方法
此包中包含一个名为`LoginController`的控制器，因此你的负责登录的控制器（如： `IndexController`）应该继承此控制器以使用登录功能：
```php
namespace frontend\\controllers;

use lvzmen\\YiiGoogleConsole\\controllers\\LoginController;
use Yii;

class IndexController extends LoginController
{

}
```
> 注意：不建议使用`Yii`自带的`SiteController`继承`LoginController`，因为前者内部已经包含`actionLogin`方法，会覆盖父类的方法。

## 相关配置
- 路由配置（登录路由和首页路由）；
- 菜单配置

### 配置路由
由于`Yii`默认的首页路由是`site/index`，且默认的登录路由是`site/login`，因此您需要作如下调整：
```php
return [
    'components' => [
        'user' => [
            'identityClass' => 'common\\models\\User',
            'loginUrl' => ['index/login'],  // 修改登录路由，index是上述指定的继承LoginController的控制器id
        ],
        'urlManager' => [
            'enablePrettyUrl' => true,
            'showScriptName' => false,
            'rules' => [
                '/' => '/index/index'       // 修改首页路由
            ],
        ],
    ]
];
```

### 配置菜单
您可以先不配置，以查看默认的菜单样例。
菜单分为：logo图片及地址、顶部导航栏、侧边导航栏、个人信息下拉菜单，您需要在可以被加载到系统的`params.php`中进行配置：
```php
return [
    'google-console' => [
        // 头部导航，包括logo，应用名称，菜单和用户菜单
        "head" => [
            //"username" => "Lvzmen",
            "app_name" => [
                "label" => "Google Console",
                "url" => "#",
            ],
            "logo" => [
                "img" => "",
                "url" => "",
            ],
            "nav" => [
                [
                    "label" => "Overview",
                    "url" => "#",
                    "class" => "active"
                ],
                [
                    "label" => "Develop",
                    "url" => "#",
                    "class" => ""
                ],
                [
                    "label" => "Test",
                    "url" => "#",
                    "class" => ""
                ],
            ],
            "dropdown" => [
                ["label" => "Action", "url" => "#"],
                ["label" => "Another action", "url" => "#"],
                ["label" => "Something else here", "url" => "#"],
                "separator",
                ["label" => "Logout", "url" => "#"],
            ]
        ],
        // 左边导航栏
        "left" => [
            [
                "label" => "Project Details",
                "icon" => "search",
                "href" => "#",
                "class" => "active"
            ],
            [
                "label" => "Directory information",
                "icon" => "flash",
                "href" => "#",
                "class" => ""
            ]
        ]
    ]
];
```

HTML

        ];


        echo Tabs::widget([
            'navType' => 'nav-tabs nav-justified',
            'items' => [
                [
                    'label' => '源码下载',
                    'content' => Markdown::widget(["content" => $html["source"]]),
                    'active' => true
                ],
                [
                    'label' => 'Yii依赖包-Composer',
                    'content' => Markdown::widget(["content" => $html["yii"]]),
                    'active' => false
                ],
                [
                    'label' => 'Yii依赖包（含登录系统）-Composer',
                    'content' => Markdown::widget(["content" => $html["yii-login"]]),
                    'active' => false
                ]
            ],
        ]);

        ?>
    </div>
</div>